<template>
    <el-row class="user-info-form" type="flex" justify="center">
        <el-col>
            <div class="add-new-plan">
                <el-form label-width="150px" :model="classesForm" :rules="classesFormRules" ref="classesForm" @submit.native.prevent>
                    <el-form-item label="值班次序：" prop='orderTimes'>
                        <el-input type="number" v-model="classesForm.orderTimes" auto-complete="off" placeholder="请输入值班次序" :min="1"></el-input>
                    </el-form-item>
                    <el-form-item label="班次名称：" prop='orderName'>
                        <el-input v-model="classesForm.orderName" auto-complete="off" placeholder="请输入班次名称"></el-input>
                    </el-form-item>
                    <el-form-item label="值班跨天：" prop='daysInterval'>
                        <el-input type="number" v-model="classesForm.daysInterval" auto-complete="off" placeholder="请输入值班跨天" :min="0"></el-input>
                    </el-form-item>
                    <el-form-item label="开始时间：" prop='startTime'>
                        <el-time-select
                            v-model="classesForm.startTime"
                            :picker-options="{
                                start: '00:00',
                                step: '00:05',
                                end: '23:55'
                            }"
                            placeholder="选择值班开始时间">
                        </el-time-select>
                    </el-form-item>
                    <el-form-item label="结束时间：" prop='endTime'>
                        <el-time-select
                            v-model="classesForm.endTime"
                            :picker-options="{
                                start: '00:00',
                                step: '00:05',
                                end: '23:55'
                            }"
                            placeholder="选择值班结束时间">
                        </el-time-select>
                    </el-form-item>
                    <el-form-item label-width="0" class="verifyidentity-button">
                        <el-button @click.stop="closeFun" round>取消</el-button>
                        <el-button type="primary" @click="saveClasses" round>保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import * as Dao from '@/api/watch'
import { watch } from 'fs';

export default {
    name: 'ClassesInfoForm',
    props: {
        organizationId: {
            required: true
        },
        oldInfo: {
            type: Object
        },
        closeFun: {
            type: Function,
            required: true
        }
    },
    data() {
        var checkCompany = (rule, value, callback) => {
            if(!this.firstLoad) {
                if (value === '') {
                    callback(new Error('请选择维保公司'))
                } else {
                    callback()
                }
            } else {
                this.firstLoad = false
            }
        }
        return {
            classesForm: {
                organizationId: this.organizationId,
                id: this.oldInfo.id || '',
                orderTimes: '',
                orderName: '',
                daysInterval: '',
                startTime: '',
                endTime: ''
            },
            classesFormRules: {
                orderTimes: [
                    { required: true, message: '请输入值班次序', trigger: 'blur' },
                    {pattern:/^\+?[1-9]\d*$/ , message:'请输入正确的数值'}
                ],
                orderName: [
                    { required: true, message: '请输入班次名称', trigger: 'blur' }
                ],
                daysInterval: [
                    { required: true, message: '请选输入值班跨天', trigger: 'blur' },
                    {pattern:/^[+]{0,1}(\d+)$/ , message:'请输入正确的数值'}
                ],
                startTime: [
                    { required: true, message: '请选择值班开始日期', trigger: 'change' }
                ],
                endTime: [
                    { required: true, message: '请选择值班结束日期', trigger: 'change' }
                ]
            }
        }
    },
    created() {
        let that = this
        // 有历史数据
        if(that.oldInfo && that.oldInfo.id) {
            $.extend(that.classesForm, that.oldInfo)
        }
    },
    methods: {
        // 保存计划
        saveClasses() {
            // 阻止事件冒泡
            event.stopPropagation()
            let that = this
            
            that.$refs['classesForm'].validate((valid) => {
                if (valid) {
                    let parames = that.classesForm
                    // 提交
                    Dao.updateClasses(parames).then(res => {
                        if(res.status === 200) {
                            that.$message({
                                message: '保存成功！',
                                type: 'success'
                            })
                            that.closeFun(true)
                        } else {
                            that.$message({
                                message: res.info,
                                type: 'warning'
                            })
                        }
                    })
                } else {
                    return false
                }
            })
        }
    },
    watch:{
        //校验值班次序00000
        orderTimesVal(val,oldVal){
            if(val!==oldVal){
                this.classesForm.orderTimes=Number(val)
            }
        },
        //校验值班跨天00000
        daysIntervalVal(val,oldVal){
            if(val !== oldVal){
                this.classesForm.daysInterval=Number(val)
            }
        }
    },
    computed:{
        orderTimesVal(){
            return this.classesForm.orderTimes
        },
        daysIntervalVal(){
            return this.classesForm.daysInterval
        }
    }
}
</script>
